<template>
	<!-- 账户设置-商家 -->
	<view class="accountSetting-main">
		<!-- 账户信息 -->
		<view class="clerkManage-options">
			<view class="clerkManage-option">
				<view class="clerkManage-option-header">账户信息</view>
				<view class="option-item">
					<view class="option-item-title">头像</view>
					<view class="option-item-icons" style="width: 100rpx">
						<image :src="imageUrls(storeInfo.image)" style="width: 80rpx; height: 80rpx; border-radius: 50%"></image>
					</view>
				</view>

				<view class="option-item">
					<view class="option-item-title">{{storeType == '2' ?'昵称':'门店名称'}}</view>
					<view class="option-item-icons" style="width: 300rpx;text-align: right;">
						<text style="padding-right: 10rpx">{{ storeInfo.name || '暂无名称' }}</text>
					</view>
				</view>

				<view class="option-item">
					<view class="option-item-title">登录身份</view>
					<view class="option-item-icons" style="width: 200rpx; text-align: right">
						<uni-tag v-if="storeType != '2'" text="店主" size="mini" type="warning"></uni-tag>
						<uni-tag v-else text="创客" size="mini" type="warning"></uni-tag>
					</view>
				</view>
			</view>
		</view>

		<!-- 联系信息 -->
		<view class="clerkManage-options">
			<view class="clerkManage-option" style="margin-top: 30rpx">
				<view class="clerkManage-option-header">联系信息</view>
				<view class="option-item">
					<view class="option-item-title">联系人</view>
					<view class="option-item-icons" style="text-align: right;width: 300rpx;color: #444;">
						{{ storeInfo.contact_name || '暂无联系人' }}
					</view>
				</view>
				<view class="option-item">
					<view class="option-item-title">联系人</view>
					<view class="option-item-icons" style="text-align: right;width: 300rpx;color: #444;">
						<text>{{ storeInfo.contact_phone || '暂无联系电话' }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="accountSetting-btn" @click="outLogin">退出登录</view>
	</view>
</template>

<script>
import { imageUrl } from '../../../utils/tools';
import { storeAccountOpen } from '../../../api/payment/index.js';
import { flashManageInfo } from '../../../api/flashManage/index.js';
export default {
	data() {
		return {
			storeInfo: {},
			storeType:""
		};
	},
	onLoad() {
		this.getflashManageInfo();
		this.storeType = this.$store.state.storeType;
	},
	methods: {
		// 门店信息获取
		async getflashManageInfo() {
			try {
				const resData = await flashManageInfo({
					type: this.$store.state.storeType
				});
				this.storeInfo = resData.data;
			} catch (e) {
				throw Error(e);
			}
		},

		imageUrls(fileUrl) {
			return imageUrl(fileUrl);
		},
		
		// 退出登录
		async outLogin() {
			uni.showModal({
				title: '提示',
				cancelText: '取消',
				confirmText: '确认退出',
				confirmColor: '#bb412e',
				content: '是否退出当前登录？',
				success: (res) => {
					if (res.confirm) {
						this.$store.commit('clearStoreType');
						this.$store.commit('clearStoreInfo');
						uni.removeStorageSync('storeTabbarVal');
						setTimeout(() => {
							uni.switchTab({
								url:'/pages/nationwideDelivery/nationwideDelivery'
							})
						}, 500);
					}
				}
			});
		},
	}
};
</script>

<style scoped lang="scss">
.accountSetting-main {
	box-sizing: border-box;
	padding: 30rpx;
	.clerkManage-options {
		.clerkManage-option {
			background-color: #fff;
			border-radius: 24rpx;
			padding: 30rpx;
			padding-bottom: 0px;
			.clerkManage-option-header {
				margin-bottom: 20rpx;
				font-weight: bold;
			}
			.option-item {
				height: 100rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px #f3f3f3 solid;
				font-size: 28rpx;
				.option-item-icon {
					width: 55rpx;
				}
				.option-item-title {
					flex: 1;
					font-size: 28rpx;
					color: #555;
				}
				.option-item-icons {
					width: 50rpx;
					text-align: center;
				}
			}
		}
	}

	.accountSetting-btn {
		background-color: #2979ff;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
		text-align: center;
		font-size: 28rpx;
		color: #fff;
		margin-top: 30rpx;
	}
}
</style>
